<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>从项目添加图层</title>
    <style>
        html,body,#viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.17/esri/css/main.css">
    <script src="https://js.arcgis.com/4.17/"></script>
    <script>
        require([
            'esri/Map',
            'esri/views/MapView',
            'esri/layers/Layer'
        ],function(
            Map,
            MapView,
            Layer
        ){
            var map = new Map({
                basemap:"topo-vector"
            });

            var view = new MapView({
                container:'viewDiv',
                map:map,
                center:[-118.80543,34.02700],
                zoom:13
            });
            // 向地图添加图层
            // 该函数将等待 portalItem 加载，然后将图层添加到指定index位置的地图中
            function addLayer(layerItemPromise, index) {
                return layerItemPromise.then(function (layer) {
                    map.add(layer, index)
                })
            };
            // 使用静态成员Layer和fromPortalItem方法访问Trailheads（点）层。
            // 将id属性设置portalItem为33fc2fa407ab40f9add12fe38d5801f5。
            // 使用该addLayer功能将图层添加到地图。
            var trailheadsPortalItem = Layer.fromPortalItem({
                portalItem: {
                    id: "33fc2fa407ab40f9add12fe38d5801f5"
                }
            });
            // addLayer(trailheadsPortalItem,0)


            //*** ADD ***//

            // Trails
            var trailsPortalItem = Layer.fromPortalItem({
            portalItem: {
                id: "52a162056a2d48409fc3b3cbb672e7da"
            }
            });

            // Parks
            var parksPortalItem = Layer.fromPortalItem({
            portalItem: {
                id: "83cf97eea04e4a699689c250dd07b975"
            }
            });
            addLayer(trailheadsPortalItem,2).then(
                addLayer(trailsPortalItem,1).then(
                    addLayer(parksPortalItem,0)
                )
            )

            // 使用SQL定义表达式限制图层要素
            // 通过在显示之前设置值来更新图层属性
            // 例如，可以更新popup，renderer或definitionExpression
            // 更新图层以应用SQL定义表达式以限制从图层返回的数据（加载后）
            // 更新该addLayer函数以定义一个表达式，该表达式将“足迹”限制为仅海拔高度小于250英尺的那些
            function addLayer(layerItemPromise, index) {
                return layerItemPromise.then(function (layer) {
                    layer.when(function () {
                        if (layer.title === "Trails_Styled_Popups") {
                            layer.definitionExpression = "ELEV_GAIN < 250";
                        }
                    });
                    map.add(layer, index);
                });
            }

        })
    </script>
</head>
<body>
    <div id="viewDiv"></div>
</body>
</html>